<template>
	<view>
		<view class="user-trends">
		<!-- 头像信息 -->
		<view class="user-trends-top">
			<view class="trends-top-img">
				
			</view>
			<view class="trends-user-info">
				<view class="user-name">
					<view>{{pageData.nickname}}</view>
				</view>
				<view class="send-time">
					{{pageData.showtime}}
				</view>
			</view>
			<view class="hr"></view>
		</view>
		<!-- 内容 -->
		<view class="send-trends-conten">
			<view class="title-conten">
				{{pageData.content}}
			</view>
			<view class="image-conten">
				<view class="image-list" v-for="(items,index) in pageData.pics">
					<image :src="items" mode="" @tap="previewImage" :data-url="items"></image>
				</view>
			</view>
		</view>
		<!-- 点赞 -->
		<view class="operate" style="display: flex;align-items: center;" v-if="mid==pageData.mid">
			<text  style="margin-left:20rpx;font-weight:normal" @tap="deltie" :data-id="pageData.id">删除</text>
		</view>
		<view class="operate" v-else>
			<view class="operate-detile">
				<uni-icons type="hand-down" color="#9f9f9f" size="18"></uni-icons>
				<text>没有价值{{0}}</text>
			</view>
			<view class="operate-detile" @tap.stop="zan" :data-id="item.id" :data-index="index">
				<uni-icons type="hand-up"color="#9f9f9f" size="18"></uni-icons>
				<text>靠谱{{pageData.zan>999?'999+':pageData.zan}}</text>
			</view>
		</view>
		</view>
		<!--评论-->
		<view class="plbox">
			<view class="plbox_title"><text class="t1">评论</text><text>{{plcount}}</text></view>
			<view class="plbox_content" id="datalist">
				<block v-for="(item, idx) in datalist" :key="idx">
				<view class="item1 flex">
					<view class="f1 flex0"><image :src="item.headimg"></image></view>
					<view class="f2 flex-col">
						<text class="t1">{{item.nickname}}</text>
						<text class="t11">{{item.createtime}}</text>
						<view class="t2 plcontent"><parse :content="item.content" /></view>
						<block v-if="item.replylist.length>0">
						<view class="relist">
							<block v-for="(hfitem, index) in item.replylist" :key="index">
							<view class="item2">
								<view class="f1">{{hfitem.nickname}}<text class="t1">{{hfitem.createtime}}</text>
									<text v-if="hfitem.mid==mid" class="phuifu" style="font-size:20rpx;margin-left:20rpx;font-weight:normal" @tap="delplreply" :data-id="hfitem.id">删除</text>
								</view>
								<view class="f2 plcontent"><parse :content="hfitem.content" /></view>
							</view>
							 </block>
						</view>
		      </block>
						<view class="t3 flex">
							<view class="flex1">
								<text class="phuifu" style="cursor:pointer" @click="pinglun(pageData.id,item.id,item.nickname)">回复</text>
								<text v-if="item.mid==mid" class="phuifu" style="cursor:pointer;margin-left:20rpx" @tap="delpinglun" :data-id="item.id">删除</text>
							</view>
							<view class="flex-y-center pzan" @tap="pzan" :data-id="item.id" :data-index="idx">{{item.zan}}</view>
						</view>
					</view>
				</view>
		  </block>
			</view>
		</view>
		<view class="covermy" @click="blurChange()"><image :src="pre_url+'/static/img/lt_fatie.png'"></image></view>
		<view class="send-btn">
			<view class="plun">
				评论
			</view>
			<view class="input">
				<input type="text" :focus="isAutofocus" v-model="contens" :placeholder="placeholderConten" />
			</view>
			<view class="action">
			  <view @tap="showface" class="emote"><image src="https://lt.caomei.zone/xcxstatic/static/img/emote.png"></image></view>
			  <button class="cu-btn bg-gradual-green shadow-blur round" @click="submit">发布</button>
			</view>
			<wxface style="position: absolute;" v-if="faceshow" @selectface="selectface"></wxface>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				id:null,
				pagenum:1,
				datalist:[],
				iszan:'',
				pageData:{},
				isFocus:false,
				contens:"",
				placeholderConten:"说说你的想法",
				mid:null,
				faceshow:false,
				isAutofocus:false,
				hfID:null,
				type:0,
				pre_url:app.globalData.pre_url,
			}
		},
		onLoad(e) {
			this.id = e.id || 0;
			// this.$nextTick(() => {
			//     const inputElem = this.$refs.myInput.$el
			//     if(inputElem) {
			//       inputElem.focus()
			//     }
			//   })
			this.getdata();
		},
		methods: {
			showface: function () {
			  this.faceshow = !this.faceshow;
			},
			selectface: function (face) {
			  var content = this.contens + face;
			  this.faceshow = false;
			  this.contens = content;
			},
			pinglun(id,hfid,nickname){
				this.placeholderConten = `回复${nickname}:`
				this.isAutofocus = true
				this.type=1
				this.hfID = hfid;
				this.id = id
			},
			blurChange(){
				this.placeholderConten = "说说你的想法"
				this.id = this.pageData.id;
				this.type=0
				this.contens = ''
				this.hfID = null
				this.isAutofocus = false
			},
			submit(){
				var that = this;
				var id = that.id;
				var type = that.type;
				var hfid = that.hfID;
				var content = that.contens;
				console.log(this.contens)
				if (content == '') {
				  app.error('请输入评论内容');
				  return;
				}
				app.showLoading('提交中');
				app.post("ApiLuntan/subpinglun", {id: id,type: type,hfid: hfid,content: content}, function (res) {
				  app.showLoading(false);
				  if (res.status == 1) {
				    app.success(res.msg);
					that.getdata()
					that.blurChange()
				    // setTimeout(function () {
				    //   app.goback(true);
				    // }, 1000);
				  } else {
				    app.error(res.msg);
				  }
				});
			},
			deltie: function (e) {
			  var that = this;
			  var id = e.currentTarget.dataset.id;
			  app.confirm('确定要删除吗?', function () {
			    app.post("ApiLuntan/deltie", {id: id}, function (res) {
			      app.success(res.msg);
			      setTimeout(function () {
			        app.goback(true);
			      }, 1000);
			    });
			  });
			},
			delplreply: function (e) {
			  var that = this;
			  var id = e.currentTarget.dataset.id;
			  app.confirm('确定要删除吗?', function () {
			    app.post("ApiLuntan/delplreply", {id: id}, function (res) {
			      app.success(res.msg);
			      setTimeout(function () {
			        that.getdata();
			      }, 1000);
			    });
			  });
			},
			zan: function (e) {
			  var that = this;
			  var id = that.id;
			  var index = e.currentTarget.dataset.index;
			  var datalist = that.pageData;
			  app.post("ApiLuntan/zan", {id: id}, function (res) {
			    if (res.type == 0) {
			      //取消点赞
			      datalist.iszan = 0;
			      datalist.zan = datalist.zan - 1;
			    } else {
			      datalist.iszan = 1;
			      datalist.zan = datalist.zan + 1;
			    }
			  });
			},
			pzan: function (e) {
			  var that = this;
			  var id = e.currentTarget.dataset.id;
			  var index = e.currentTarget.dataset.index;
			  var datalist = that.datalist;
			  app.post("ApiLuntan/pzan", {id: id}, function (res) {
			    if (res.type == 0) {
			      //取消点赞
			      var iszan = 0;
			    } else {
			      var iszan = 1;
			    }
			    datalist[index].iszan = iszan;
			    datalist[index].zan = res.zancount;
			    that.datalist = datalist;
			  });
			},
			getdata() {
			  this.pagenum = 1;
			  this.datalist = [];
			  var that = this;
			  var pagenum = that.pagenum;
			  app.post('ApiLuntan/detail', {pagenum: pagenum,id: that.id}, function (res) {
				  console.log(res)
			    if(res.need_call){
			        that.need_call = true;
			    }
				that.pageData = res.detail;
				that.id = that.pageData.id;
			    var data = res.datalist;
			    if (pagenum == 1) {
			        that.mid = res.mid;
			        that.datalist = res.datalist;
			        that.plcount = res.plcount;
			        that.iszan = res.iszan;
			        that.detail = res.detail;
			      that.myscore = res.myscore;
					// that.loaded({title:res.detail.content,pic:res.detail.pics[0]});
			    }else{
			      if (data.length == 0) {
			      } else {
			        var datalist = that.datalist;
			        var newdata = datalist.concat(data);
			        that.datalist = newdata;
			      }
			    }
			  });
			},
		}
	}
</script>

<style scoped lang="less">
.user-trends{
		margin-top: 10rpx;
		// margin-bottom: 150rpx;
		width: 100%;
		min-height: 30vh;
		background-color: #FFFFFF;
		// border-radius: 20rpx;
		// margin: 2% auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15rpx;
		.user-trends-top{
			display: flex;
			position: relative;
			margin-bottom: 20rpx;
			height: 150rpx;
			align-items: center;
			.hr{
				position: absolute;
				width: 100vw;
				height: 1rpx;
				bottom: -20rpx;
				box-shadow: 0 1rpx #ececec;
				// background-color: #000000;
			}
			.trends-top-img{
				width: 100rpx;
				height: 100rpx;
				background-color: #00BFFF;
				border-radius: 100%;
			}
			.trends-user-info{
				display: flex;
				height: 100rpx;
				flex-direction: column;
				justify-content: space-around;
				width: 80%;
				margin-left:2%;
				.user-name{
					font-family: "微软雅黑";
					font-weight: 600;
					font-size: 30rpx;
					display: flex;
					align-items: center;
				}
				.send-time{
					font-size: 24rpx;
					color: #cecece;
				}
			}
		}
		
		.send-trends-conten{
			.title-conten{
				margin: 2% 0;
				padding: 15rpx 0;
			}
			.image-conten{
				width: 100%;
				.image-list{
					width: 100%;
					height: 45vh;
					// background-color: #00BFFF;
					margin: 2% 0;
					border-radius: 25rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}
		}
		.operate{
			width: 100%;
			display: flex;
			height: 80rpx;
			// justify-content: space-between;
			.operate-detile{
				margin-right: 15%;
				font-size: 25rpx;
				color: #9f9f9f;
				display: flex;
				align-items: center;
				text{
					margin-left: 10rpx;
				}
			}
		}
	}
	.send-btn{
		 position: fixed;
		 bottom: 0;
		 width: 100%;
		 height: 100rpx;
		 background-color: #FFFFFF;
		 border-radius: 80rpx;
		 display: flex;
		 justify-content: space-around;
		 align-items: center;
		 .plun{
			 width: 10%;
			 color: #000000;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		 }
		 .input{
			 width: 60%;
			 height: 70%;
			 background-color: #f4f4f4;
			 display: flex;
			 justify-content: flex-end;
			 border-radius: 100rpx;
			 input{
				 width: 98%;
				 height: 100%;
			 }
		 }
		 .action{
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 .emote{
			 	height: 50rpx;
				width: 50rpx;
				image{
					width: 100%;
					height: 100%;
				}
			 }
		 }
		
	}
	.covermy{position:fixed;z-index:99999;bottom:100rpx;right:20rpx;width:130rpx;height:130rpx;box-sizing:content-box}
	.covermy image{width:100%;height:100%}
	.plbox{width:100%;padding:20rpx 20rpx;background:#fff;margin-top:10px;margin-bottom: 150rpx}
	.plbox_title{font-size:28rpx;height:60rpx;line-height:60rpx;margin-bottom:20rpx;color:#222;font-weight:bold}
	.plbox_title .t1{margin-right:16rpx}
	.plbox_content .plcontent{vertical-align: middle;color:#111}
	.plbox_content .plcontent image{ width:44rpx;height:44rpx;vertical-align: inherit;}
	.plbox_content .item1{width:100%;margin-bottom:20rpx}
	.plbox_content .item1 .f1{width:80rpx;}
	.plbox_content .item1 .f1 image{width:60rpx;height:60rpx;border-radius:50%}
	.plbox_content .item1 .f2{flex:1}
	.plbox_content .item1 .f2 .t1{color:#222;font-weight:bold}
	.plbox_content .item1 .f2 .t11{color:#999999;font-size:20rpx}
	.plbox_content .item1 .f2 .t2{color:#000;margin:10rpx 0;line-height:60rpx;}
	.plbox_content .item1 .f2 .t3{color:#999;font-size:20rpx}
	.plbox_content .item1 .f2 .pzan image{width:32rpx;height:32rpx;margin-right:16rpx}
	.plbox_content .item1 .f2 .phuifu{color:#507DAF;font-size:24rpx}
	.plbox_content .relist{width:100%;background:#F6F5F8;padding:4rpx 20rpx;margin-bottom:20rpx}
	.plbox_content .relist .item2{font-size:24rpx;margin-bottom:10rpx}
	.plbox_content .relist .item2 .f1{font-weight:bold;color:#222;width:100%}
	.plbox_content .relist .item2 .f1 .t1{font-weight:normal;color:#999999;font-size:20rpx;padding-left:20rpx}
</style>
